<template>
  <div class="main-box">
    <div class="login-box">
      <el-form
          lang="en-hans"
          ref="ruleFormRef"
          :model="ruleForm"
          status-icon
          style="width: 100%;"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm">
        <el-form-item>
          <div class="login-title">
            <h1>心机之蛙</h1>
          </div>
        </el-form-item>
        <el-form-item class="username" prop="username">
          <el-input lang="en-hans" v-model="ruleForm.username" clearable placeholder="输入账号" autocomplete="off" >
            <template #prefix>
              <el-icon class="el-input__icon"><User /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input @keyup.enter="submitForm(ruleFormRef)"  class="password" lang="en-hans" v-model="ruleForm.password" type="password" clearable placeholder="输入密码" autocomplete="off">
            <template #prefix>
              <el-icon class="el-input__icon"><Unlock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item class="remember">
          <el-checkbox v-model="remember" label="记住密码" size="small" />
          <el-link href="/register" type="primary">注册账号</el-link>
        </el-form-item>
        <el-form-item>
          <el-button :loading="loading" style="width: 100%" lang="en-hans" type="primary" @click="submitForm(ruleFormRef)">
            登  录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import {ElForm, ElFormItem, ElInput, ElButton, ElMessage} from 'element-plus'
import {Unlock, User} from "@element-plus/icons-vue";
import {login} from "@/api/auth";
import router from "@/router";
import store from "@/store";
import {getValue, removeKey, setKeyValue, setToken} from "@/utils/auth";

const remember= ref(!getValue('remember'));

const ruleFormRef = ref(null)
/**
 * 账号校验
 */
const validateUsername = (rule, value, callback) => {
  value=value.trim()
  const regexp=/^[a-zA-Z0-9]{5,11}$/
  if (value === '') {
    callback(new Error('请输入账号'))
  } else if (!regexp.test(value)){
    callback(new Error('用户名必须为5-11位字母、数字组成'))
  }else{
    callback()
  }
}
/**
 * 密码校验
 */
const validatePassword = (rule, value, callback) => {
  value=value.trim()
  const regexp=/^[a-zA-Z0-9.@#]{6,20}$/
  if (value === '') {
    callback(new Error('请输入密码'))
  } else if (!regexp.test(value)) {
    callback(new Error('密码长度为6-20位字母、数字、符号(.@#)'))
  }else {
    callback()
  }
}

const ruleForm = reactive({
  username: remember.value ? getValue("username"):'',
  password: remember.value ? getValue("password"):'',
})

const rules = reactive({
  username: [{ validator: validateUsername, trigger: 'blur' }],
  password: [{ validator: validatePassword, trigger: 'blur' }],
})

const loading= ref(false)
const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    //valid 校验结果
    if (!valid) return;
    loading.value = true;
    if (remember.value){
      setKeyValue('remember',true)
      setKeyValue('username',ruleForm.username)
      setKeyValue('password',ruleForm.password)
    }else {
      removeKey('remember')
      removeKey('username')
      removeKey('password')
    }
    store.dispatch('Login',ruleForm).then((res)=>{
      ElMessage({
        message: "登录成功！",
        type: 'success',
      })
      loading.value=false;
      router.push('/index')
    }).catch(() => {
      loading.value = false;
    })
  })
}
</script>

<style>
.main-box{
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-box{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 300px;
  border-radius: 10px;
  background: rgba(255,255,255,1);
  box-shadow: 0 0 15px darkgray;
  padding: 25px;
}
.login-title{
  width: 100%;
  margin: 15px 0 15px;
}
.username .el-input__inner{
  letter-spacing: 3px !important;
}
.password .el-input__inner{
  letter-spacing: 2px !important;
}
.el-form-item__content{
  justify-content: space-between;
  .el-link__inner{
    line-height: 24px;
  }
}
.remember{
  .el-link__inner{
    font-size: 12px;
  }
}
</style>